<template>
  <div class="big-dialog" >
    <div class="big-dialog-back" @click="onClose"></div>
    <div class="big-dialog-inner">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'big-dialog',
  props: {
    visible: false
  },
  data() {
    return {}
  },
  methods: {
    onClose() {
      this.$emit('onClose')
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.big-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: url("~@/assets/east/dialog-bg-cxpt.png");
  background-size: 100% 100%;

  &-back {
    position: absolute;
    width: 450px;
    height: 100px;
    left: 220px;
    top: 188px;
    border-radius: 10px;
    cursor: pointer;

    &:hover {
      opacity: .8;
      background-color: rgba(255, 255, 255, .2);
    }
  }

  &-inner {
    position: absolute;
    top: 16%;
    bottom: 5%;
    left: 4%;
    right: 4%;
  }
}
</style>
